<template>
  <div class="container">
    <el-form size="small" label-width="50px">
      <el-form-item label="油站">
        <el-select v-model="params.gasId" label="选择油站" @change="getMyInterests">
          <el-option v-for="item in gasList" :label="item.gasName" :key="item.gasId" :value="item.gasId"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div v-if="myInterests.length !== 0">
      <div v-for="(itemParent, index) in myInterests" :key="index">
        <span class="classifyName">{{itemParent.classifyName}}</span>
        <div class="list-box" v-if="itemParent.interestList.length">
          <div class="item-box" v-for="(item, index) in itemParent.interestList" :key="index">
            <div class="item-market" @click="handleMarketList">活动列表</div>
            <img :src="item.pic" alt="" class="item-box-icon">
            <div class="item-box-title">{{item.interestName}}</div>
            <div class="item-box-word">{{item.remark}}</div>
            <div class="item-box-oper">
              <div :class="`remain-num-${index}`" v-for="(itmchild, index) in item.interestContent" :key="index">
                <div>{{itmchild.title}}</div>
                <div><span>{{itmchild.num}}</span><span>{{itmchild.unitDesc}}</span></div>
              </div>
            </div>
            <div class="useRight"  v-if="item.totalRemainNum === 0" @click="goBuy"><span class="useWord">去购买</span></div>
            <div class="useRight"  v-else-if="canJumpRoute.includes(item.interestRoute)" @click="goUse(item.interestRoute)"><span class="useWord">去使用</span></div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-data">
      <img src="./../../assets/image/no-data-equite.png" alt="">
      <div>暂无权益</div>
    </div>
  </div>
</template>

<script>
import { marketHelperList, getAllGasInfoList } from '@/api/marketShop'
import { mapGetters, mapActions } from 'vuex'

export default {
  /**
    * 权益类型 1-触达类、2-宣传类、3-排位类、4-活动类、5-发券类、6-事物类、7-其他
  */
  data () {
    return {
      myInterests: [],
      params: {},
      gasList: [],
      // 可以点击去使用的权益
      canJumpRoute: ['callLossDriver', 'callRoundDriver', 'gasSort', 'coupon', 'vip', 'masterShouts'],
      // 权益类型对应使用权益的路由
      typeToPath: {
        callLossDriver: '/marketCenter/callGoneDriver',
        callRoundDriver: '/marketCenter/callAmbientDriver',
        gasSort: '/marketCenter/gasSort',
        coupon: '/marketCenter/gasCoupon',
        vip: '/marketCenter/memberCare',
        masterShouts: '/marketCenter/stationMasterShouts'
      }
    }
  },
  mounted () {
    const { gasId } = this.$route.query
    this.getAllGasStationsApi(gasId)
  },
  computed: {
    ...mapGetters([
      'routes','gasInfo'
    ])
  },
  methods: {
    ...mapActions('market', {'dispatchMarket': 'setGasInfo'}),
    async getMyInterests () {
      const { gasId } = this.params
      const { code, result = [] } = await marketHelperList({ gasId })
      // const resultCopy = result.length > 0 ? result.filter((item) => { return !['短信', 'App通知'].includes(item.interestName) }) : []
      if (code !== 200) return
      this.myInterests = result
    },
    // 获取加油站
    async getAllGasStationsApi (gasId) {
      try {
        const { code, result = [] } = await getAllGasInfoList()
        if (code !== 200) return
        this.$set(this.params, 'gasId', gasId || result[0].gasId)
        this.getMyInterests()
        this.gasList = result
      } catch (e) {
        console.log(e)
      }
    },
    // 去使用
    goUse (interestCode) {
      const gas = this.gasList.filter((item) => { return item.gasId === this.params.gasId })
      this.dispatchMarket(gas) // 存储在vuex里面
      const toPath = this.typeToPath[interestCode]
      const isCanTo = this.routes.find(route => route.children.find(child =>  toPath === `${route.path}/${child.path}`))
      if (!isCanTo) {
        return this.$message.warning('暂无权限，联系运营帮忙开通')
      }
      this.$router.push({
        path: toPath,
        query: {
          gasId: this.params.gasId
        }
      })
    },
    // 去购买
    goBuy () {
      this.$router.push({ path: '/marketShop/shopCenter' })
    },
    // 跳转到活动列表
    handleMarketList () {
      this.$router.push({ path: '/dataAnalyze/dataAnalyze_index',query:{gasId:this.params.gasId} })
    }
  }
}
</script>

<style scoped lang="less">
  .container {
    padding-top: 20px;
  }
  .classifyName{
    padding-left: 15px;
    font-size: 20px;
    font-weight: 800;
    color: #000;
  }
  .list-box {
    display: flex;
    flex-wrap: wrap;
    .item-box {
      width: 31%;
      min-width: 336px;
      min-height: 413px;
      padding-bottom: 20px;
      position: relative;
      background: #ffffff;
      text-align: center;
      margin: 10px;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      -ms-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s;
      .item-market{
        position: absolute;
        top:15px;
        right: 18px;
        width: 76px;
        height: 30px;
        cursor: pointer;
        line-height: 30px;
        border-radius: 2px;
        border: 1px solid #4B7EFE;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #4B7EFE;
      }
      &:hover {
        box-shadow: 0px 10px 30px 0px rgba(43, 54, 105, 0.2);
      }
      .item-box-icon {
        width: 130px;
        height: 130px;
        margin-top: 32px;
      }
      .item-box-word{
        min-height:16px;
        padding: 0 50px 0 50px;
        margin-top: 10px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .item-box-title {
        font-size: 20px;
        font-weight: 600;
        color: #222222;
        margin-top: 24px;
      }
      .item-box-oper {
        display: flex;
        margin-top: 36px;
        justify-content: space-around;
        div {
          div {
            &:nth-child(1) {
              font-size: 14px;
              font-weight: 400;
              color: #999999;
              margin-bottom: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              &:before {
                content: '';
                width: 5px;
                height: 5px;
                background: #44D7B6;
                display: block;
                margin-right: 8px;
                border-radius: 50%;
              }
            }
            &:nth-child(2) {
              font-size: 16px;
              font-weight: 400;
              color: #222222;
              margin-bottom: 18px;
              span {
                &:nth-child(1) {
                  font-size: 24px;
                  font-weight: 600;
                }
              }
            }
          }
        }
        .used-num, .num {
          .btn {
            background: #fff;
            color: #4B7EFE;
            border: 1px solid #4B7EFE;
          }
        }
        .remain-num-1 {
          div {
            &:nth-child(1) {
              &:before {
                background: #F55672 !important;
              }
            }
          }
        }
        .remain-num-2 {
          div {
            &:nth-child(1) {
              &:before {
                background: #4B7EFE !important;
              }
            }
          }
        }
      }
    }
    .useRight{
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .useWord{
        width: 90%;
        min-height: 50px;
        background: #4B7EFE;
        box-shadow: 0px 4px 8px -2px rgba(75, 126, 254, 0.3);
        border-radius: 5px;
        font-size: 14px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 50px;
      }
    }
  }

  .no-data {
    margin: 150px auto 0;
    width: 130px;
    img {
      width: 130px;
    }
    div {
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #666666;
      margin-top: 15px;
    }
  }
</style>